<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合图表展示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            margin-top: 40px;
        }
        .chart {
            width: 600px;
            height: 400px;
            margin: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 学历分布图 -->
    <div id="educationChart" class="chart"></div>

    <!-- 年龄分布图 -->
    <div id="ageChart" class="chart"></div>

    <!-- 性别比例图 -->
    <div id="genderPieChart" class="chart"></div>

    <!-- 环形图 -->
    <div id="ringChart" class="chart"></div>
</div>

<script>
    // 学历分布图
    var educationChart = echarts.init(document.getElementById('educationChart'));
    const eduLevels = ['大专及以下', '本科', '硕士', '博士'];
    const maleData = [35, 80, 40, 3];
    const femaleData = [25, 70, 40, 7];
    const educationOption = {
        title: { text: '学历分布（男女堆叠）', left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['男性', '女性'], top: 30 },
        xAxis: { type: 'category', data: eduLevels },
        yAxis: { type: 'value', name: '人数' },
        series: [
            {
                name: '男性', type: 'bar', stack: 'gender',
                label: { show: true, position: 'inside' },
                itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3a8ee6' }, { offset: 1, color: '#70c1ff' }]) },
                data: maleData
            },
            {
                name: '女性', type: 'bar', stack: 'gender',
                label: { show: true, position: 'inside' },
                itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#4cd964' }, { offset: 1, color: '#a6f3c5' }]) },
                data: femaleData
            }
        ]
    };
    educationChart.setOption(educationOption);

    // 年龄分布图
    var ageChart = echarts.init(document.getElementById('ageChart'));
    const ageGroups = ['<25岁', '25~30', '31~40', '41~50', '51~55', '56~60', '>60岁'];
    const male = [51, 56, 96, 83, 33, 5, 2];
    const female = [51, 63, 106, 90, 30, 15, 3];
    const ageOption = {
        title: { text: '各年龄段性别分布', left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['男性', '女性'], top: 30 },
        xAxis: { type: 'category', data: ageGroups },
        yAxis: { type: 'value', name: '人数' },
        series: [
            {
                name: '男性', type: 'bar', stack: '性别',
                label: { show: true, position: 'inside' },
                itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3a8ee6' }, { offset: 1, color: '#70c1ff' }]) },
                data: male
            },
            {
                name: '女性', type: 'bar', stack: '性别',
                label: { show: true, position: 'inside' },
                itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#4cd964' }, { offset: 1, color: '#a6f3c5' }]) },
                data: female
            }
        ]
    };
    ageChart.setOption(ageOption);

    // 性别比例图
    const genderPieChart = echarts.init(document.getElementById('genderPieChart'));
    const maleCount = 158;
    const femaleCount = 167;
    const totalCount = maleCount + femaleCount;
    genderPieChart.setOption({
        title: { text: '性别比例', left: 'center', top: 'center', textStyle: { fontSize: 16, color: '#666' } },
        series: [{
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: { show: false },
            data: [
                { value: maleCount, name: '男性', itemStyle: { color: '#3398DB' } },
                { value: femaleCount, name: '女性', itemStyle: { color: '#4cd964' } }
            ]
        }],
        legend: {
            orient: 'horizontal',
            bottom: 10,
            width: 400,
            data: [
                {
                    name: `男性 - ${maleCount} | ${((maleCount / totalCount) * 100).toFixed(1)}%`,
                    icon: 'circle'
                },
                {
                    name: `女性 - ${femaleCount} | ${((femaleCount / totalCount) * 100).toFixed(1)}%`,
                    icon: 'circle'
                }
            ],
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 10
        }
    });

    // 环形图
    const ringChart = echarts.init(document.getElementById('ringChart'));
    const ringData = [
        { name: "数据局", value: 1300, percentage: 13 },
        { name: "数据处", value: 1200, percentage: 12 },
        { name: "数据主中心", value: 1300, percentage: 13 },
        { name: "数据主中中心", value: 1200, percentage: 12 },
        { name: "数据中中心", value: 1200, percentage: 12 },
        { name: "数据主中心", value: 1600, percentage: 16 },
        { name: "数据主中中心", value: 1600, percentage: 16 },
        { name: "数据次中心", value: 1600, percentage: 16 }
    ];
    const ringOption = {
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '325\n总数',
                textAlign: 'center',
                fill: '#000',
                fontSize: 40,
                fontWeight: 'bold',
                lineHeight: 60
            }
        },
        legend: {
            orient: 'horizontal',
            bottom: 10,
            width: 400,
            data: ringData.map(item => item.name),
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 10,
            formatter: (name) => {
                const item = ringData.find(d => d.name === name);
                return `{name|${name}}{value|${item.value}}{percentage|${item.percentage}%}`;
            },
            textStyle: {
                rich: {
                    name: { width: 80, align: 'left' },
                    value: { width: 40, align: 'right' },
                    percentage: { width: 40, align: 'right' }
                }
            }
        },
        series: [{
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            data: ringData.map((item, index) => ({
                name: item.name,
                value: item.value,
                itemStyle: { color: ['#1E90FF', '#00CED1', '#20B2AA', '#3CB371', '#FF6347', '#FF4500', '#FFA500', '#FFD700'][index] }
            })),
            label: { show: false },
            emphasis: { label: { show: false } }
        }],
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }
    };
    ringChart.setOption(ringOption);

</script>

</body>
</html>
